<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>八角放大</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		#box{
			width: 200px;
			height: 200px;
			background: pink;
			position: absolute;
			top: 300px;
			left: 300px;
		}
	</style>	
</head>
<body>
	<div id="box"></div>
</body>
</html>
<script>
	//获取元素
	var boxDiv = document.getElementById("box");
	boxDiv.onmousedown = function(e){
		//记录初始位置
		var x = e.clientX;
		var y = e.clientY;

		document.onmousemove = function(e){
			var sX = e.clientX - x;
			var sY = e.clientY
         if(x - boxDiv.offsetLeft <= 20)   
		};
		this.onmouseup = function(){
			document.onmousemove = null;
		};
	};
</script>